<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>轮播图</title></title>
    <style>
        .carousel-inner img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container-lg">
        <!-- data-ride="carousel"启动轮播功能可以使用jQuery替代 -->
        <div class="carousel slide" id="cid" data-interval="3000" >
            <ol class="carousel-indicators">
            <!-- ******************************************指示器******************************************** -->
            <!-- data-target="#cid" data-slide-to="0"指示器切换图片的功能也可以使用jquery替换 -->
                <li id="slide-1"  class="active"></li>
                <li id="slide-2" ></li>
                <li id="slide-3" ></li>
                <li id="slide-4" ></li>
                <li id="slide-5" ></li>
                <li id="slide-6" ></li>
                <li id="slide-7" ></li>
            </ol>
            <!-- ******************************************轮播图放图片的部分*************************************************** -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../images/mi2.jpg" class="img-fluid">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>一级标题</h1>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi2.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi3.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi4.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi5.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi6.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi7.jpg" class="img-fluid">
                </div>
            </div>
 <!-- ******************************************轮播图控制按钮*************************************************** -->
 <!-- data-slide="prev"向后和向前切换图片的方法也可以使用jQuery手动控制 -->
            <a href="#cid" class="carousel-control-prev" >
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a href="#cid" class="carousel-control-next" >
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>
    
</body>
<script>
    // jQuery方法：当页面启动时就执行
    $(document).ready(function(){
        // 启动轮播图
        $("#cid").carousel();
        // 手动控制轮播图切换
        $(".carousel-control-prev").click(function(){
            $("#cid").carousel("prev");
        });
        $(".carousel-control-next").click(function(){
            $("#cid").carousel("next");
        });
        // 控制指示器切换图片
        $("#slide-1").click(function(){
            $("#cid").carousel(0);
        });
        $("#slide-2").click(function(){
            $("#cid").carousel(1);
        });
        $("#slide-3").click(function(){
            $("#cid").carousel(2);
        });
        $("#slide-4").click(function(){
            $("#cid").carousel(3);
        });
        $("#slide-5").click(function(){
            $("#cid").carousel(4);
        });
        $("#slide-6").click(function(){
            $("#cid").carousel(5);
        });
        $("#slide-7").click(function(){
            $("#cid").carousel(6);
        });

    })
</script>
</html>